<template>
  <a-card slot="card" :title="content" style="width: 500px">
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item
        v-for="(k, index) in form.getFieldValue('keys')"
        :key="index"
        v-bind="index === 0 ? formItemLayout : formItemLayoutWithOutLabel"
        :label="index === 0 ? 'item' : ''"
        :required="false"
      >
        <a-input
          v-decorator="[
            `names[${index}]`,
            {
              validateTrigger: ['change', 'blur'],
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: '请输入' + content,
                },
              ],
              initialValue: typeof k.name == 'string' ? k.name : null,
            },
          ]"
          :placeholder="content"
          style="width: 60%; margin-right: 8px"
        />
        <a-icon
          v-if="form.getFieldValue('keys').length > 1"
          class="dynamic-delete-button"
          type="minus-circle-o"
          :disabled="form.getFieldValue('keys').length === 1"
          @click="() => remove(k)"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayoutWithOutLabel">
        <a-button type="dashed" style="width: 60%" @click="add">
          <a-icon type="plus" /> 添加{{ content }}
        </a-button>
      </a-form-item>
      <a-form-item v-bind="formItemLayoutWithOutLabel">
        <a-button type="primary" html-type="submit" style="margin: 10px auto">
          更新
        </a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
let id = 0;
export default {
  props: {
    content: {
      type: String,
      default: "",
    },
    initValue: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 },
        },
      },
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          xs: { span: 240, offset: 0 },
          sm: { span: 20, offset: 4 },
        },
      },
    };
  },
  created() {
    this.form = this.$form.createForm(this, { name: "dynamic_form_item" });
    this.form.getFieldDecorator("keys", {
      initialValue: this.initValue,
      preserve: true,
    });
  },
  methods: {
    remove(k) {
      console.log(k);
      const { form } = this;
      const keys = form.getFieldValue("keys");
      // We need at least one passenger
      if (keys.length === 1) {
        return;
      }
      // can use data-binding to set
      form.setFieldsValue({
        keys: keys.filter((key) => key !== k),
      });
    },

    add() {
      let that = this;
      const { form } = this;
      // can use data-binding to get
      const keys = form.getFieldValue("keys");
      const nextKeys = keys.concat(keys.length + 1);
      form.setFieldsValue({
        keys: nextKeys,
      });
    },

    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          const { keys, names } = values;
          console.log("Received values of form: ", values);
          this.$emit("handleSubmit", {
            data: values,
          });
        } else {
          this.$emit("handleSubmit", { data: "error" });
        }
      });
    },
  },
};
</script>

<style scoped>
</style>